<template>
    <div @click="jump" class="bug-panel p-2">
        <div class="title mb-1">{{dat.title}}</div>
        <div class="times">
            <span class="mr-1">空晓天</span>
            <span>2020-12-02</span>
        </div>
        <p>{{dat.content}}</p>
        <div class="footer">
            <span>浏览 83</span>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, toRefs } from 'vue'
// import { useRouter } from 'vue-router'
export default defineComponent({
    props: {
        dat: {
            type: Object,
            default: () => {}
        }
    },
    setup(props: { dat: Object }) {
        // let router = useRouter()
        let dat: any = toRefs(props.dat)
        const jump = (): void => {
            console.log(dat)
            // router.push({
            //     path: '/detail',
            //     query: {
            //         id: id
            //     }
            // })
        }
        return {
            jump
        }
    }
})
</script>

<style lang='scss' scoped>
.bug-panel {
    cursor: pointer;
    background-color: white;
    transition: all .5s;
    border-top: 1px solid $color-1;
    z-index: 9;
    @include triangle(2, $color-1);
    &:hover {
        box-shadow: 0 0 10px #ddd;
        transform: scale(1.1);
    }
    .title {
        @include text-ell;
        color: $color-1;
        font-weight: 600;
        font-size: 1.1rem;
    }
    .times {
        font-size: 12px;
        color: #bbb;
        margin-bottom: 5px;
    }
    >p {
        @include text-ell(3);
        color: #999;
        margin-bottom: 5px;
    }
    .footer {
        font-size: 12px;
        color: #bbb;
        display: flex;
        justify-content: flex-end;
    }
}
</style>